<template>
	<div class="ui-picture-cells">
		<draggable @update="datadragEnd" v-bind="handleGetOptions()">
			<div class="ui-picture-cell" v-for="(item, index) in value" :key="timestamp + index">
				<div class="move-btn noselect">
					<div class="cell">
						<Icon type="md-move" size="28" color="#bcc1c4" />
						<p>拖动排序</p>
					</div>
				</div>
				<div class="config">
					<Form :label-width="38">
						<FormItem label="文字">
				            <Input v-model="item.title" @click.stop="" :placeholder="placeholder"></Input>
				        </FormItem>
				        <FormItem label="链接">
				            <Input v-model="item.link">
				            	<span slot="prepend">http://</span>
				            	<span slot="append">选择链接</span>
				            </Input>
				        </FormItem>
					</Form>
				</div>
				<div class="remove" @click="handleRemove(index)"><Icon type="ios-close-circle" color="#1ba2fc" :size="16" /></div>
			</div>
		</draggable>
		<Button long icon="md-add" class="add-btn" @click="handleAdd">添加一项</Button>
	</div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
	name: 'pictureUploads',
	components: {
		draggable
	},
	props: {
		value: Array,
		placeholder: {
			type: String,
			default: '填写文字'
		}
	},
	data() {
		return {
			timestamp: ''
		}
	},
	methods: {
		// 拖拽参数
		handleGetOptions() {
			return {
				animation: 300,
				handle: '.move-btn'
			}
		},
		// 拖拽
		datadragEnd(e) {
			let dragElem = this.value.splice(e.oldIndex, 1);
			this.value.splice(e.newIndex, 0, dragElem[0]);
			this.timestamp = parseInt(new Date().getTime());
		},
		handleAdd() {
			this.value.push({title: '', link: ''});
		},
		handleRemove(index) {
			this.value.splice(index, 1);
		}
	}
}
</script>

<style>
.move-btn {
	display: table;
	margin-right: 10px;
	width: 88px;
	height: 88px;
	background-color: #e6e6e6;
	cursor: move;
}
.move-btn .cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
</style>